<template>
  <div>
    <div>
      <el-input
        v-model="filterText"
        placeholder="请输入名称"
        style="width: calc(100% - 30px); margin: 10px 15px 10px 10px"
      >
        >
        <i slot="suffix" class="el-icon-search el-input__icon"></i>
      </el-input>
    </div>
    <el-tree
      ref="tree"
      :data="dataSource"
      :node-key="nodeKey"
      :props="defaultProps"
      highlight-current
      default-expand-all
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpandKey"
      :default-checked-keys="defaultCheckKey"
      :render-content="renderContent"
      @node-click="clickNodeChange"
    ></el-tree>
  </div>
</template>

<script>
  export default {
    name: 'NodeList',
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Array,
        required: true,
        default: () => [],
      },
      /* key */
      nodeKey: {
        type: String,
        default: 'id',
      },
      defaultProps: {
        type: Object,
        required: true,
      },
      /* 默认展开的节点 */
      defaultExpandKey: {
        type: Array,
        default: () => [],
      },
      /* 默认选中的节点 */
      defaultCheckKey: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        filterText: '',
        iconClass: '',
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
    },
    methods: {
      // 点击节点选中事件 --- 点击时间就得到选中的节点（点击动作就意味着选中 check-on-click-node ）
      clickNodeChange(data) {
        // 将选中的节点传回父组件
        this.$emit('change', data)
        // console.log("tree 传值给 父组件");
      },

      // 搜索过滤
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },

      // 自定义显示函数 后期可改为父组件传入的方式
      renderContent(h, { node, data, store }) {
        if (data.objectType === 'classify') {
          return (
            <span class="custom-tree-node">
              <svg-icon icon-class="wf-item"></svg-icon>
              <span style="margin-left: 15px;">{node.label}</span>
            </span>
          )
        } else {
          return (
            <span class="custom-tree-node">
              <svg-icon icon-class="guide"></svg-icon>
              <span style="margin-left: 15px;">{node.label}</span>
            </span>
          )
        }
      },
    },
  }
</script>

<style scoped></style>
